<script setup lang="ts">
import { Table } from "@/models/reactiveComponent";
import { computed, ref, inject, watch } from "vue";

import * as injectKeys from "@/services/injectKeys";
import { useElementSize, watchOnce } from "@vueuse/core";
import * as tableUtils from "./table";

const props = defineProps<{ model: Table }>();
const model = props.model;

const columnPropsMap = new Map<string, Record<string, any>>(
  Object.entries(model.columnProps ?? {})
);
function getColumnProps(name: string) {
  if (columnPropsMap.has(name)) {
    return columnPropsMap.get(name);
  }

  return {};
}

const reactdataServices = inject(injectKeys.reactdataServicesKey)!;

const filterUtils = reactdataServices.getFilterUtils(model);

const data = filterUtils.getData();

const tableData = computed(() => data.value.rows);
const columns = computed(() => data.value.fields);

const currentPage = ref(1);
const withPages = computed(() => {
  const size = model.pageSize;
  const start = (currentPage.value - 1) * size;
  const end = start + size;

  return tableData.value.slice(start, end);
});

const currentRow = ref();

const handleCurrentChange = (val: any | undefined) => {
  currentRow.value = val;
};

// this code cannot be removed
watch(columns, (col) => {});

const boxRef = ref(null as unknown as HTMLDivElement);
const tableBoxHeight = ref(model.tableHeight);

if (tableBoxHeight.value === "initial") {
  const { height } = useElementSize(boxRef);

  watchOnce(height, (height) => {
    tableBoxHeight.value = boxRef.value.offsetHeight + "px";
  });
}

const tableWidth = model.tableWidth;
let minWidth = "30rem";

if (tableWidth !== "initial") {
  minWidth = "initial";
}

const copyBtnRef = ref(null as unknown as HTMLDivElement);
const copyBtnText = ref("copy");

if (model.showCopyButton) {
  tableUtils.setupTableData2excel(copyBtnRef, copyBtnText, data);
}
</script>

<template>
  <div ref="boxRef" class="bi-table" :data-tag="model.tag">
    <div style="display: flex; max-width: 100%; position: relative">
      <div v-if="model.showCopyButton" class="btn-copy" ref="copyBtnRef">
        {{ copyBtnText }}
      </div>

      <div class="table-fix">
        <el-table
          class="table"
          header-row-class-name="table-header"
          border
          :data="withPages"
          stripe
          style="width: 100%"
          @current-change="handleCurrentChange"
          v-bind="model.props"
        >
          <el-table-column
            show-overflow-tooltip
            v-bind="getColumnProps(col)"
            v-for="col in columns"
            :property="col"
            :label="col"
          />
        </el-table>

        <el-pagination
          hide-on-single-page
          background
          layout="prev, pager, next"
          :total="tableData.length"
          v-model:current-page="currentPage"
          :page-size="model.pageSize"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.bi-table {
  overflow: auto;
  height: v-bind(tableBoxHeight);

  .btn-copy {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    border: 1px solid #8785856b;
    border-radius: 10px;
    padding: 6px;
    cursor: pointer;
  }

  .table-fix {
    flex: 1;
    min-width: v-bind(minWidth);
    width: v-bind(tableWidth);
    // width: 5em;
  }

  .table {
    margin-bottom: 2rem;
  }

  :deep(.table-header) th {
    font-size: 1.1em;
    font-weight: bold;

    background-color: rgba(143, 225, 253, 0.085);
  }
}
</style>
